<template>
    <div class="musicList">
        <div class="musicTop">
            <div class="title">发现好歌单</div>
            <div class="more" @click="$router.push('/allMusic')">查看更多</div>
        </div>
        <div class="mlist">
            <swiper :options="swiperOption" class="swiperCom">
                <swiper-slide  class="container" v-for="(item,i) in musicList" :key="i" @click="to(item.id)">
                    <img :src="item.picUrl" :alt="item.name" >
                    <div class="count">
                        <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-bofang3"></use>
                        </svg>
                        {{changeValue(item.playCount)}}
                        </div>
                    <div class="name">{{item.name}}</div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
<script>
import { getMusicList } from '@/api/index.js'
import { getsize } from '@/utils/utils.js'
import { Toast } from 'vant'
export default {
  data () {
    return {
      musicList: [],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 10
      }
    }
  },
  methods: {
    changeValue (num) {
      var res = getsize(num)
      return res
    },
    to (index) {
      this.$router.push({ path: '/listView', query: { id: index } })
    }
  },
  mounted: async function () {
    var result = await getMusicList()
    this.musicList = result.data.result
    // console.log(this.$store.state.isuser)
    if (this.$store.state.isuser === '退出') {
      Toast({
        message: '退出登录!',
        position: 'top'
      })
      this.$store.commit('setIsUser', 'false')
    }
  }
}
</script>
<style lang="less" scoped>
.musicList{
    width: 7.5rem;
    padding: 0 0.4rem;
    .musicTop{
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.3rem;
        .title{
            font-size: 0.4rem;
            font-weight: 900;
        }
        .more{
            border: 1px solid #ccc;
            padding: 0.1rem;
            border-radius: 0.2rem;
            font-size: 0.25rem;
        }
    }
}
.mlist{
    .swiperCom{
        width: 100%;
        height: 3rem;
        .container{
            display: flex;
            flex-direction: column;
            position: relative;
            img{
                width: 100%;
                height: auto;
                border-radius: 0.1rem;
            }
            .name{
                height: 0.6rem;
                width: 100%;
                font-size: 0.25rem;
                line-height: 0.3rem;
                overflow: hidden;
                -webkit-line-clamp: 2;
            }
            .count{
                position:absolute;
                right: 0.1rem;
                top: 0.05rem;
                font-size: 0.2rem;
                color: #ccc;
                display: flex;
                align-items: center;
            }
            .icon{
                fill: #ccc;
            }
        }
    }
}
</style>
